<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>行星信息</title>
    <!-- 兼容IE -->
    <script src="./js/polyfill.min.js"></script>
    <script src="./js/babel.min.js"></script>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script src="./js/vue-local.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>

    <style>
        html,
        body,
        #app {
            height: 100%;
            width: 100%;
        }

        body {
            /* #053469 */
            background: #1c5392;
            color: #ffffff;
        }


        .top {
            padding: 10px;
            height: 40px;
        }

        .nav-logo {
            text-align: center;
            line-height: 40px;
            padding-right: 15px;
        }

        .nav-logo i {
            font-size: 50px;
            animation-duration: 2s;
        }

        .primary-nav {
            display: flex;
            line-height: 40px;
            align-content: space-between;
        }

        .nav-item {
            margin: 0 5px;
            flex: 1;
            text-align: center;
            font-size: 1.3vw;
            border: #ffffff 0.5px solid;
            border-radius: 10px;
            cursor: pointer;
        }

        .nav-item i {
            font-size: 1.3vw;
        }

        .nav-active {
            background: #ffffff;
            color: #053469
        }

        .main {
            width: 99%;
            margin: 0 auto;
            height: calc(100% - 65px);
        }

        .main-left,
        .main-right {
            height: 100%;
        }

        .main-left .content,
        .main-right .content {
            height: 100%;
            background: #053469;
        }

        .main-right .content {
            position: relative;
        }

        .sub-nav {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-content: space-between;
            text-align: center;
        }

        .sub-nav-item {
            padding: 8vh 0;
            flex: 1;
            font-size: 1.5vw;
            cursor: pointer;
        }

        .sub-nav-item p {
            margin-top: 10px;
        }

        .sub-nav-item i {
            font-size: 2vw;
        }

        .mainFrame {
            width: 100%;
            height: 100%;
        }

        .loadingMask {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: #053469;
            text-align: center;
        }

        .loadingMask i {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="layui-row top">
            <div class="layui-col-md1 nav-logo">
                <span><i
                        class="layui-icon layui-icon-snowflake layui-anim layui-anim-rotate layui-anim-loop"></i></span>
            </div>
            <div class="layui-col-md11 nav-right">
                <!-- 主导航栏 -->
                <ul class="primary-nav">
                    <li v-for="(item,index) in navArr" class="nav-item"
                        :class="{ 'nav-active': (view == (index+1)) ? true : false }" @click="navTo(item.name,index)">
                        <i :class="item.iconType"></i>
                        {{item.name}}
                    </li>
                </ul>
            </div>
        </div>
        <!-- 左边栏 -->
        <div class="layui-row main layui-col-space10">
            <div class="layui-col-md1 main-left">
                <div class="content">
                    <!-- 子导航 -->
                    <ul v-for="(nav,index) in navArr" class="sub-nav" v-show="(view == (index+1))?true:false">
                        <li v-for="(item,subIndex) in nav.subNavArr" class="sub-nav-item"
                            :class="{ 'nav-active': ((subView) == (subIndex+1))?true:false }"
                            @click="subNavTo(item.name,subIndex)">
                            <i :class="item.iconType"></i>
                            <p>{{item.name}}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-col-md11 main-right">
                <div class="content">
                    <div class="loadingMask" v-show="isLoading"><i
                            class="layui-icon layui-icon-loading layui-anim-rotate layui-anim-loop"></i></div>
                    <iframe class="mainFrame" :src="ifrLocation" frameborder="0" scrolling="no"
                        @load="loaded()"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- <script type="text/babel"> -->
    <script>
        // let planetColor = this.parent.planetColor
        // document.getElementsByClassName("left")[0].style.color = planetColor
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    navArr: [
                        {
                            name: "Resource",
                            iconType: "layui-icon layui-icon-diamond",
                            subNavArr: [
                                { name: "Fund", iconType: "layui-icon layui-icon-dollar" },
                                { name: "Oil", iconType: "layui-icon layui-icon-water" },
                                { name: "Factory", iconType: "layui-icon layui-icon-util" }
                            ]
                        },
                        {
                            name: "Milita",
                            iconType: "layui-icon layui-icon-flag",
                            subNavArr: [
                                { name: "Morale", iconType: "layui-icon layui-icon-fire" },
                                { name: "Armors", iconType: "layui-icon layui-icon-set" },
                                { name: "Denfense", iconType: "layui-icon layui-icon-auz" }
                            ]
                        },
                        {
                            name: "Geometry",
                            iconType: "layui-icon layui-icon-tree",
                            subNavArr: [
                                { name: "Fund1", iconType: "layui-icon layui-icon-dollar" },
                                { name: "Oil2", iconType: "layui-icon layui-icon-water" },
                                { name: "Factory3", iconType: "layui-icon layui-icon-util" }
                            ]
                        },
                        {
                            name: "Diplomacy",
                            iconType: "layui-icon layui-icon-group",
                            subNavArr: [
                                { name: "Fund", iconType: "layui-icon layui-icon-dollar" },
                                { name: "Oil", iconType: "layui-icon layui-icon-water" },
                                { name: "Factory", iconType: "layui-icon layui-icon-util" }
                            ]
                        }
                    ],
                    subNavInfo: [],
                    view: 1,
                    subView: 1,
                    showIframe: { view: 1, subView: 1 },
                    where: { primary: "Resource", sub: "Fund" },
                    isLoading: true,
                    ifrLocation: "./page/Resource/Fund.html"
                }
            },
            watch: {
                where: {
                    handler(w) {
                        console.log("!")
                        this.ifrLocation = `./page/${w.primary}/${w.sub}.html`
                        console.log(this.ifrLocation)
                    },
                    deep: true
                }
            },
            methods: {
                navTo(where, index) {
                    this.view = index + 1;
                    this.where.primary = where
                    console.log(this.navArr[index].subNavArr[0].name)
                    this.subNavTo(this.navArr[index].subNavArr[0].name, 0)
                    // switch (where) {
                    //     case 'Resource':
                    //         break;
                    //     case 'Milita':
                    //         break;
                    //     case 'Geometry':
                    //         break;
                    //     case 'Diplomacy':
                    //         break;
                    //     default:
                    //         console.log("routing error")
                    //         break;
                    // }
                },  
                subNavTo(where, index) {
                    this.subView = index + 1;
                    this.where.sub = where
                    this.isLoading = true
                    // switch (key) {
                    //     case value:

                    //         break;

                    //     default:
                    //         break;
                    // }
                },
                loaded() {
                    this.isLoading = false
                }
            },
            mounted() {
                layui.use('form', function () {
                    let form = layui.form;
                    //各种基于事件的操作，下面会有进一步介绍
                });
            }
        })



    </script>
</body>

</html>